﻿<template>

  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/' }">平台</el-breadcrumb-item>

      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>

      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>

    </el-breadcrumb>
    <!-- 卡片视图区 -->

    <el-card class="box-card" stripe style="width: 100%">

      <el-row :gutter="20">

        <el-col :span="8"

          ><el-input

            placeholder="请输入内容"

            v-model="addAdminData.keyword"

            class="input-with-select"

          >

            <el-button

              slot="append"

              icon="el-icon-search"

              @click="getuser()"

            ></el-button> </el-input

        ></el-col>

        <el-col :span="4">

          <el-button type="primary" @click="showAddAdmin()">添加管理员</el-button>

        </el-col>

      </el-row>

      <!-- 用户列表区域 -->

      <el-table :data="userlist" stripe style="width: 100%" >

      	

        <!--<el-table-column type="index"> </el-table-column>-->

        <el-table-column prop="id" label="id" width="180"></el-table-column>

        <el-table-column prop="username" label="用户名" width="180"> </el-table-column>

        <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>

        <el-table-column prop="nickname" label="昵称"> </el-table-column>

        <el-table-column prop="role_name" label="角色"> </el-table-column>

         

        <el-table-column label="操作">

        <!-- <template slot-scope="scope"> -->

          <i class="el-icon-edit" size="mini" ></i> &nbsp;

          <i class="el-icon-delete" size="mini" ></i>

        <!-- </template> -->

       </el-table-column>

      </el-table>

      <!-- 分页 -->

      <el-pagination  :current-page="1" @size-change="handleSizeChange"  @current-change="handleCurrentChange"

        :page-sizes="[2, 3, 5, 10]"   :page-size="2" layout="total, sizes, prev, pager, next, jumper" :total="total">

      </el-pagination>

    </el-card>

    

     <!--添加管理员弹窗-->

    <el-dialog title="添加管理员" :visible.sync="isShowAddAdmin">

      <el-form :model="addAdminData">

        <el-form-item label="用户名">

          <el-input v-model="addAdminData.username" autocomplete="off" label-width="10px"></el-input>

        </el-form-item>

         <el-form-item label="昵 称">

          <el-input v-model="addAdminData.nickname" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="密码">

          <el-input v-model="addAdminData.password" autocomplete="off"></el-input>

        </el-form-item>

          <el-form-item label="确认密码密码">

          <el-input v-model="addAdminData.secondpsd" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="邮箱">

          <el-input v-model="addAdminData.email" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="角色">

          <el-select v-model="addAdminData.role_id" placeholder="请选择角色">

            <el-option

              v-for="role_v in roleList"

              :key="role_v.id"

              :label="role_v.role_name"

              :value="role_v.id"

            ></el-option>

          </el-select>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="isShowAddAdmin = false">取 消</el-button>

        <el-button type="primary" @click='addRoleAdmin()'>确 定</el-button>

      </div>

    </el-dialog>



    <!-- 修改管理员弹窗 -->

    <!--<el-dialog title="修改管理员" :visible.sync="isShowEditAdmin">

      <el-form :model="editAdminData">

        <el-form-item label="管理员">

          <el-input v-model="editAdminData.username" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="昵称">

          <el-input v-model="editAdminData.nickname" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="邮箱">

          <el-input v-model="editAdminData.email" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="角色">

          <el-select v-model="editAdminData.role_id" placeholder="请选择角色">

            <el-option

              v-for="role_v in roleList"

              :key="role_v.id"

              :label="role_v.role_name"

              :value="role_v.id"

            ></el-option>

          </el-select>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="isShowEditAdmin = false">取 消</el-button>

        <el-button type="primary" @click="editAdmin">确 定</el-button>

      </div>

    </el-dialog>-->

  </div>

</template>



<script>
import axios from "axios";

export default {
  data() {
    return {
      // 添加管理员弹窗

      isShowAddAdmin: false,

      roleList: [
        { id: 1, role_name: "超级管理员" },

        { id: 2, role_name: "主管" },

        { id: 3, role_name: "经理" },

        { id: 10, role_name: "组长" },

        { id: 11, role_name: "测试角色" },
      ],

      addAdminData: {
        username: "",

        password: "",

        secondpsd: "",

        nickname: "",

        email: "",

        role_id: "",

        page: 1,

        keyword: "",

        //每页显示条目数

        pageSize: "2",
      },

      userlist: [],

      //总条数

      total: 0,
    };
  },

  methods: {
    // 添加管理员弹窗

    showAddAdmin() {
      //   控制弹窗

      this.isShowAddAdmin = true;
    },

    addRoleAdmin() {
      axios
        .post("http://adminapi.pyg.com/save", this.addAdminData)
        .then((res) => {
          var { code, data, msg } = res.data;

          if (code == 200 && msg == "success") {
            this.$message({
              message: "注册成功",

              type: "success",
            });

            this.isShowAddAdmin = false;
          } else {
            this.$message.error(msg);
          }
        });
    },

    getuser() {
      //  获取用户列表

      axios
        .get("http://adminapi.pyg.com/adminlist", { params: this.addAdminData })

        .then((res) => {
          // console.log(res);

          if (res.data.code !== 200 || res.data.msg != "success") {
            return this.$message.error("获取用户列表失败");
          }

          var { data } = res.data;

          //  console.log(data);

          this.userlist = data.data;

          //           //总条数

          this.total = data.total;
        });
    },

    //监听pagesize改变时间

    handleSizeChange(newsize) {
      // console.log(newsize);

      this.addAdminData.pageSize = newsize;

      this.getuser();
    },

    handleCurrentChange(val) {
      //  	console.log(val);

      this.addAdminData.page = val;

      this.getuser();
    },
  },

  mounted() {
    this.getuser();
  },
};
</script>



<style>
.el-row {
  margin-top: 10px;
}
</style>
